<template>
    <div>
        <el-tabs v-model="activeName" >
            <el-tab-pane label="基础信息" name="Datas">
                
                <el-form :model="model" ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm page-form">
                    <el-form-item label="班组编号" prop="TeamCode">
                        <el-input v-model="model.TeamCode" placeholder="请输入班组编号"></el-input>
                    </el-form-item>

                    <el-form-item label="班组类型" prop="TeamType">
                        <el-select v-model="model.TeamType" placeholder="请选择班组类型">
                            <el-option v-for="item in TeamTypeList" :key="item.Id" :label="item.TypeName" :value="item.TypeName"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="班组名称" prop="TeamName">
                        <el-input v-model="model.TeamName" placeholder="请输入班组名称"></el-input>
                    </el-form-item>

                    <el-form-item label="班组组长" prop="TeamLeader">
                        <el-input v-model="model.TeamLeader" placeholder="请输入班组组长"></el-input>
                    </el-form-item>

                    <el-form-item label="备注" prop="Remark">
                        <el-input v-model="model.Remark" placeholder="请输入备注"></el-input>
                    </el-form-item>
                </el-form>
            </el-tab-pane>

            <el-tab-pane label="班组成员" name="BOM">


                <div class="page-tool">
                    <el-button type="primary" plain icon="el-icon-plus" @click="addBom" size="small">新增</el-button>
                    <el-button  type="danger" plain icon="el-icon-delete" size="small" @click="delBom">删除</el-button>
                </div>


                <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360" >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column  prop="PersonCode" label="人员编号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="UserName" label="人员名称" :show-overflow-tooltip="true"></el-table-column>


                    <el-table-column label="操作" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button type="text" @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>


        <div style="text-align:right; margin: 10px;">
            <el-button type="primary" @click="submitForm">{{ isUpdate ? '立即保存' : '立即创建' }}</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>


        <!--弹窗-->
        <el-dialog append-to-body  :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible" width="60%">
           <TeamMemberInput :BomList="tableData" @callback="AddBomCallBack" v-if="dialogDomain.dialogVisible"/>
        </el-dialog>

    </div>
</template>

<script>

import TeamMemberInput from './TeamMemberInput.vue';
export default {
    components: {
        TeamMemberInput,
    },
    props: {
        model: {
            require: true,
            type: Object,

        },
        isUpdate: {
            require: true,
            type: Boolean
        }
    },
    //数据生命周期 
    data() {
        return {
            activeName: 'Datas',
            TeamTypeList: [],

            tableData: [],

            isLoading: false,
            
            //对话框对象
            dialogDomain: {
                title: '物料产品选择',
                dialogVisible: false,
            },

            rules: {
                TeamCode: { required: true, message: '请输入班组编号', trigger: 'blur' },
                TeamName: { required: true, message: '请输入班组名称', trigger: 'blur' },
            }
        }
    },
    //实例生命周期
    created() {
        this.getTeamTypeData();

        this.GetTeamMemberbyCodeAsync(this.model.TeamCode);
    },
    methods: {
        
       
        //添加班组成员
        addBom() {
            this.dialogDomain.title = "选择班组成员";
            this.dialogDomain.dialogVisible = true;
        },
        //批量删除班组成员
        delBom(){
            if(this.$refs.dataForm.selection.length<=0){
                this.showNotify('请选择一项');
                return;
            }

            this.$refs.dataForm.selection.forEach(row => {
                const index = this.tableData.indexOf(row);
                this.tableData.splice(index, 1);
            });
        },
        //删除班组成员
        del(model) {
            let index = this.tableData.indexOf(model);
            this.tableData.splice(index,1);
        },

        //立即创建
        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {

                    if (this.isUpdate) {
                        this.put();
                    }
                    else {
                        this.add();
                    }

                } else {
                    this.showNotify('请输入必填项');
                    return false;
                }
            });
        },
        //重置
        resetForm() {
            this.$refs['ruleForm'].resetFields();
        },
        add() {
            this.$http.postForm('/api/Team', { model: this.model,TeamMemberString:JSON.stringify(this.tableData) }, { loading: this.$loading() })
            .then(res => {
                this.$emit('callback');
            })

        },
        //修改
        put() {
            this.$http.putForm('/api/Team', { model: this.model,TeamMemberString:JSON.stringify(this.tableData) }, { loading: this.$loading() })
                .then((res) => {
                    this.$emit('callback');
                })
        },
        //获取班组类型
        getTeamTypeData() {
            this.$http.get('/api/TeamType/GeyAll')
                .then(res => {
                    this.TeamTypeList=res.Data;
                })
        },

        //根据班组编号获取班组附加表
        GetTeamMemberbyCodeAsync(Id) {
            this.isLoading=true;
            this.$http.get('/api/Team/GetTeamMemberbyCodeAsync',{
                params:{
                    TeamCode:Id
                }
            })
            .then(res => {
                this.tableData = res.Data;
                console.log(res);
                this.isLoading=false;
            })
        },



        //新增或编辑页面回调
        AddBomCallBack() {
            this.dialogDomain.dialogVisible = false;
        },



    }
}
</script>

<style>

</style>